<template>
    <div class="container">
        <div class="crawler_box">
            <div class="header_box">
                <el-button icon="el-icon-circle-plus-outline" :disabled="!btnList.includes('fse/crane/rigging/add')" type="primary" @click="addModelBtn(1,'','')">吊索具</el-button>
            </div>
            <div class="btom_box">
                <div class="table_box">
                    <el-table :data="tableList">
                        <el-table-column prop="hook" label="吊钩" ></el-table-column>
                        <el-table-column prop="wire" label="钢丝绳"></el-table-column>
                        <el-table-column prop="bolt" label="插销保险"></el-table-column>
                        <el-table-column prop="other" label="其它"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="300" align="center">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent ="addModelBtn(2,scope.$index,tableList)" :disabled="!btnList.includes('fse/crane/rigging/edit')" type="text" size="small">编辑</el-button>
                                <el-button style="color:red" @click.native.prevent="remove(scope.$index, tableList)" :disabled="!btnList.includes('fse/crane/rigging/delete')" type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="clearfix" v-show="tableList.length > 0">
                    <div class="float-right">
                        <Page v-if="totalCount" style="margin: 20px 0;text-align: center;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
                    </div>
                </div>
            </div>
        </div>
        <Modal v-model="addModel" :title="!isAdd?'添加吊索具':'编辑吊索具'" :mask-closable="false" width="600px">
            <div class="content_box">
                <div class="item">
                    <span><i>*</i>吊钩:</span>
                    <Input v-model ="hook" placeholder = "请输入"  style = "width: 300px" clearable />
                </div>
                <div class="item">
                    <span><i>*</i>钢丝绳:</span>
                    <Input v-model ="wirerope" placeholder = "请输入"  style = "width: 300px" clearable />
                </div>
                <div class="item">
                    <span><i>*</i>插销保险:</span>
                    <Input v-model ="bolt" placeholder = "请输入"  style = "width: 300px" clearable />
                </div>
                <div class="item">
                    <span><i>*</i>其他:</span>
                    <Input v-model ="other" placeholder = "请输入"  style = "width: 300px" clearable />
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(1)" type="info" size="small">取消</el-button>
                <el-button @click="submitAll" type="primary" size="small" v-preventReClick="1500">保存</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
    getFsetoolList,
    AddFsetool,
    editFsetool,
    delFsetool
} from "@/api/api.js";
export default {
    data(){
        return{
            deptId:'',
            deptName:'',
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: "",
            tableList:[],//表格数据
            addModel:false,//添加弹框
            hook:'',
            other:'',
            bolt:'',
            wirerope:'',
            isAdd:false,
            toolId:'',
            btnList:''
        }
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.deptName = val.name
                this.pageNum = 1;
                this.keyWord = "";
                this.current = 1;
                this.getAllList();
            }
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.deptName = this.$store.state.porjectObject.name;
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.getAllList();
    },
    methods: {
        //取消
        cancel(type) {
            if(type == 1) {
              this.addModel = false
            }
        },
        addModelBtn(type,index,rows){
            if (type == 1){
                this.hook = ''
                this.other = ''
                this.bolt = ''
                this.wirerope = ''
                this.isAdd = false
            }else {
                this.toolId = rows[index].toolId
                this.hook = rows[index].hook
                this.other = rows[index].other
                this.bolt = rows[index].bolt
                this.wirerope =  rows[index].wire
                this.isAdd = true
            }
            this.addModel = true
        },
        //分页
        pageChange(index) {
            this.pageNum = index;
            this.getAllList();
        },
        //获取吊索具列表
        getAllList(){
            let params ={
                deptId:this.deptId,
                pageNum:this.pageNum,
                pageSize:this.pageSize,
            }
            getFsetoolList(params).then(res =>{
                if (res.code == 200){
                    this.tableList = res.data.list
                    this.totalCount = res.data.total;
                }else {
                    this.$Message.warning(res.msg);
                }
            }) .catch(error => {
                console.log(error);
            });
        },
        //删除吊索具
        remove(index, rows) {
            let id =  rows[index].toolId;
            this.$confirm('您确定要删除这条数据吗, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delFsetool(id)
                    .then(res => {
                        if (res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getAllList();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //提交添加信息
        submitAll(){
            if (this.hook == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请输入吊钩信息"
                });
                return;
            }if (this.wirerope == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请输入钢丝绳信息"
                });
                return;
            } if (this.bolt == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请输入插销保险信息"
                });
                return;
            }
            if (this.other == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请补充其他信息"
                });
                return;
            }
            let params = {
                deptId:this.deptId,
                hook:this.hook,
                wire:this.wirerope,
                bolt:this.bolt,
                other:this.other
            };
            if (!this.isAdd){ //添加
                AddFsetool(params).then(res =>{
                    if (res.code == 200){
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                        this.getAllList();
                    }else {
                        this.$Message.warning(res.msg);
                    }
                }) .catch(error => {
                    console.log(error);
                });
            }else { //编辑
                params.toolId = this.toolId
                editFsetool(params).then(res =>{
                    if (res.code == 200){
                        this.$message({
                            type: 'success',
                            message: '编辑成功!'
                        });
                        this.getAllList();
                    }else {
                        this.$Message.warning(res.msg);
                    }
                }) .catch(error => {
                    console.log(error);
                });
            }
            this.addModel = false
        },
    }
};
</script>
<style scoped lang="scss">
@import "./../../assets/style/fse_msg.less";
@import "./../../assets/style/themeBase.less";

i{
    color: red;
    margin-right: 6px;
}
.content_box{
    .item{
        width: 100%;
        margin-bottom: 20px;
        span{
            width: 13%;
            display: inline-block;
        }
    }
}
>>>.el-button{
    padding: 9px 15px!important;
}
>>>.el-input__inner{
    height: 35px;
    line-height: 35px;
}
>>>.el-form-item__label{
    font-size: 12px;
    // color: #515a6e;
}
.container{
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    background: #F5F5F5;
    .crawler_box {
        flex: 1;
        box-sizing: border-box;
        overflow: hidden;
        .header_box{
             padding: 10px 20px;
             background: #ffffff;
             border-radius: 6px;
             box-sizing: border-box;
        }
        .btom_box{
            width: 100%;
            margin-top: 10px;
            padding: 20px;
            background: #FFFFFF;
            box-sizing: border-box;
        }
    }
}
</style >
